<template>
  <div>
    <div class="form">
      <div style="padding-bottom: 5px">
        <p>导航栏标题</p>
        <el-input type="text" v-model.trim="formDataItem2.forms_title" placeholder="请输入导航栏标题"></el-input>
      </div>
      <div style="padding-bottom: 5px">
        <p>表单音乐【默认开启音乐，清空URL地址则会隐藏图标，不播放音乐】</p>
        <el-upload
          ref="musicUpload_id"
          class="upload-demo"
          :action="musicUploadUrl"
          accept=".mp3"
          :headers="tokenFig"
          :on-success="handleMusicSuccess"
          :on-error="handleMusicError"
          name="file"
        >
          <div style="display: flex;align-items: center;font-size: 20px">
            <i class="el-icon-upload" style="color:blue;font-size: 50px"></i>
            <span style="color:blue;">点我上传,MP3格式，不超过10M</span>
          </div>
        </el-upload>
        <el-input type="text" v-model.trim="formDataItem2.forms_music_url" placeholder="请输入表单音乐或者上传音乐"></el-input>
      </div>
      <div>
        开始时间
        <el-date-picker
          class="filter-item"
          size="small"
          v-model.trim="formDataItem2.forms_start_time"
          type="datetime"
          placeholder="选择起始日期"
          value-format="yyyy-MM-dd HH:mm:ss">
        </el-date-picker>
      </div>
      <div>
        结束时间
        <el-date-picker
          class="filter-item"
          size="small"
          v-model.trim="formDataItem2.forms_end_time"
          type="datetime"
          placeholder="选择起始日期"
          value-format="yyyy-MM-dd HH:mm:ss">
        </el-date-picker>
      </div>
      <div style="padding-bottom: 10px">
        <div style="display: flex;padding-bottom: 10px">
          <div  style="padding-right: 20px">提交后的动作</div>
          <el-radio v-model="formDataItem2.forms_submit_ok" :label="0">刷新页面</el-radio>
          <el-radio v-model="formDataItem2.forms_submit_ok" :label="1">跳转URL</el-radio>
        </div>
        <el-input v-show="formDataItem2.forms_submit_ok == 1" v-model="formDataItem2.forms_jump_url" placeholder="请输入跳转URL"></el-input>
      </div>
      <div style="padding-bottom: 10px">
        <div  style="padding-right: 20px;padding-bottom: 10px">提交成功后文字提示</div>
        <el-input v-model="formDataItem2.forms_submit_ok_msg" placeholder="请输入提交成功后文字提示"></el-input>
      </div>
      <div style="padding-bottom: 10px">
        <div  style="padding-right: 20px;padding-bottom: 10px">提交失败后文字提示</div>
        <el-input v-model="formDataItem2.forms_submit_fail_msg" placeholder="请输入提交成功后文字提示"></el-input>
      </div>
      <div style="padding-bottom: 10px">
        <div  style="padding-right: 20px;padding-bottom: 10px">可报名人数（-1不限制）</div>
        <el-input type="number" v-model.trim="formDataItem2.forms_people" placeholder="请输入可报名人数"></el-input>
      </div>
<!--      <div style="padding-bottom: 10px">-->
<!--        <div style="display: flex;padding-bottom: 10px">-->
<!--          <div  style="padding-right: 20px">是否可重复提交</div>-->
<!--        </div>-->
<!--        <el-radio-group v-model="formDataItem2.forms_is_require" style="display: flex">-->
<!--          <el-radio :label="0">不限制</el-radio>-->
<!--          <el-radio :label="1">姓名</el-radio>-->
<!--          <el-radio :label="2">手机号码</el-radio>-->
<!--          <el-radio disabled :label="3">微信openid（唯一标识）</el-radio>-->
<!--        </el-radio-group>-->
<!--      </div>-->
      <div style="padding-bottom: 10px">
        <div  style="padding-right: 20px;padding-bottom: 10px">设置表单顶部边距（rpx）</div>
        <el-input type="number" v-model.trim="formDataItem2.forms_padding_top" placeholder="请输入设置表单上边距"></el-input>
      </div>
      <div style="padding-bottom: 10px">
        <div  style="padding-right: 20px;padding-bottom: 10px">	设置表单底部边距（rpx）</div>
        <el-input type="number" v-model.trim="formDataItem2.forms_padding_bottom" placeholder="请输入设置表单上边距"></el-input>
      </div>
    </div>
  </div>
</template>

<script>
import {getToken} from "@/utils/auth";

export default {
  name: "formSetUpComponent",
  props:{
    formDataItem2:{
      type:Object,
    }
  },
  data(){
    return {
      musicUploadUrl:process.env.VUE_APP_BASE_API+'/api/uploads/musicUpload',
    }
  },
  computed:{
    tokenFig(){
      return {token:getToken()}
    }
  },
  created() {
    // console.log(this.formDataItem2)
  },
  methods:{
    //图片上传成功后，返回
    handleMusicSuccess(res, file) {
      if(file.response.status == 200){
        this.formDataItem2.forms_music_url = file.response.path
      }else {
        this.$message.error(file.response.msg);
      }
      this.$refs.musicUpload_id.clearFiles(); //去掉文件列表
    },
    //图片上传失败后，返回
    handleMusicError(err, file) {
      this.$message.error('图片上传失败!');
      this.$refs.musicUpload_id.clearFiles(); //去掉文件列表
    },
  }
}
</script>

<style scoped>
.form{
  display: flex;
  flex-flow: column nowrap;
}
.filter-item{
  width: 90%;
}
</style>
